/**
 * 【组合 VS 继承】
 * 如果你想要在组件间复用非 UI 的功能，
 * 建议将其提取为一个单独的 JavaScript 模块，
 * 如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们。
 */

import React from "react";

// 包含关系，通过children来渲染
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {
      login: ''
    };
  }
  render() {
    return (
      <Dialog
        title="Mars Exploration Program"
        message="How should we refer to you?">
        <input value={this.state.login} onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>Sign Me Up!</button>
      </Dialog>
    )
  }
  handleChange(e){
    this.setState({
      login: e.target.value
    })
  }
  handleSignUp(){
    alert(`Welcome aboard, ${this.state.login}`);
  }
}

export default SignUpDialog;